Skip to content

feat: editor layout redesign v2 + 3D box select#207

Merged
open-pascal merged 7 commits intomainfrom
feat/layout-redesign-v2
Apr 2, 2026
Merged

feat: editor layout redesign v2 + 3D box select#207
open-pascal merged 7 commits intomainfrom
feat/layout-redesign-v2

Conversation

@open-pascal
Copy link
Copy Markdown
Collaborator

Summary

Major layout redesign introducing v2 editor layout with a modern two-column structure.

New Features

  • V2 layout — navbar slot + resizable left sidebar + right viewer panel with floating toolbar slots
  • 3D box select tool — marquee selection on the ground plane with geometric containment (walls, slabs, ceilings, zones, items)
  • View mode system — 3D / 2D / Split replacing the old floorplan toggle, with always-mounted viewers to preserve WebGL context
  • Floating level selector — vertical level picker on the viewer panel, auto-discovers building levels
  • Horizontal tab bar — sidebar panel switcher (Scene, Files, etc.)

Layout Changes

  • Fixed 5-button control bar: Select, Box Select, Site Edit, Build, Delete (never morphs)
  • Simplified view toggles — scans/guides toggle+dropdown only
  • Floorplan top toolbar removed (~400 lines), controls moved to viewer toolbar and action bar
  • Site edit as permanent button in ControlModes (phase=site is the sole signal)
  • Site edge labels respect metric/imperial unit toggle
  • Resizable sidebar with collapse-to-strip behavior
  • Right panel with rounded top-left corner and shadow

Technical

  • layoutVersion prop on Editor: 'v1' (default, backward compat) or 'v2'
  • Always-mounted viewers via display:none instead of unmount — preserves WebGL context across view switches
  • New exports: FloatingLevelSelector, SettingsPanel, SidebarTab, ViewMode, SplitOrientation, FloorplanSelectionTool, useSidebarStore
  • Box select tool: 561 lines of pure Three.js geometry — wall segment intersection, polygon containment, world-position checks

Files Changed

17 files, +2821/-1896


Built and verified: bun run build passes cleanly (all 3 turbo tasks successful, 0 errors).

New v2 layout with navbar + two-column structure:
- Resizable left sidebar with horizontal tab bar
- Right viewer panel with floating toolbar slots
- Floating level selector on viewer panel
- 3D box select tool with marquee selection
- View mode system (3D/2D/Split) replacing old floorplan toggle
- Fixed 5-button control bar: Select, Box Select, Site Edit, Build, Delete
- Simplified view toggles (scans/guides only)
- Always-mounted viewers (display:none) to preserve WebGL context
- Floorplan top toolbar removed, controls moved to viewer toolbar
- Site edit as permanent peer in ControlModes (phase='site' is sole signal)
- Site edge labels respect metric/imperial unit toggle
Add ViewerToolbarLeft and ViewerToolbarRight components:
- 3D/2D/Split view mode segmented control
- Collapse sidebar button
- Level mode toggle (stacked/exploded/solo)
- Wall mode toggle (cutaway/full height/low)
- Measurement unit toggle (metric/imperial)
- Day/night theme toggle
- Perspective/orthographic camera toggle
- Walkthrough (first-person) mode
- Preview mode button

Wire up toolbar in the v2 layout app page.
- Add isCollapsed/setIsCollapsed to useSidebarStore (was missing from
  editor repo, present in upstream) — fixes CollapseSidebarButton crash
- Add collapse threshold logic to setWidth
- Restore isFirstPersonMode/setFirstPersonMode to editor store — was
  removed when syncing use-editor.tsx but still needed by
  custom-camera-controls and viewer toolbar walkthrough button
- Forces perspective camera + full-height walls when entering
  first-person mode
- Import and render FirstPersonControls inside the Viewer scene
- Add FirstPersonOverlay with exit button when in first-person mode
- Switch Viewer to selectionManager='default' during first-person mode
- Conditionally hide editor tools (selection, box select, grid, tool
  manager, site edge labels) during walkthrough
- Show ViewerZoneSystem + InteractiveSystem during first-person mode
- Hide camera controls hint during walkthrough
- V2 layout enters full-screen walkthrough view (same as preview mode
  but with FirstPersonControls instead of orbit)
When entering first-person mode from split or 2D view:
- Save current viewMode before switching
- Force viewMode to '3d' and close floorplan
- On exit, restore the previous viewMode (split/2d/3d)
Instead of swapping between EditorLayoutV2 and a full-screen walkthrough
view (which unmounts/remounts the Three.js canvas, causing material
traversal errors), keep the v2 layout always mounted and overlay the
FirstPersonOverlay on top via fixed positioning.

The viewMode: '3d' state change already hides the 2D pane, and the
conditional rendering in viewerSceneContent disables editor tools. The
overlay provides the crosshair, controls hint, and exit button.
The FirstPersonOverlay wrapper div had pointer-events-auto on the full
area, blocking clicks from reaching the Three.js canvas and preventing
pointer lock activation. Now only the exit button and crosshair/hint
elements have their own pointer-events settings — the rest passes
through to the canvas so clicking activates mouse look.
@open-pascal open-pascal merged commit 50eca05 into main Apr 2, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant